<template>
    <div>
        <el-option v-for="item in item.records"
                class="admin-search-option"
        :label="item.name" :value="item.id" :key="item.id">

            <div class="panel">
                <div class="avatar" v-if="item.avatar && item.avatar.length > 0">
                    <img :src="item.avatar" />
                </div>
                <div class="info">
                    <div class="name">
                        {{item.name}}
                    </div>
                    <div class="phone" v-if="item.nick && item.nick.length > 0">
                        {{item.nick}}
                    </div>
                    <div class="phone" v-else-if="item.phone && item.phone.length > 0">
                        {{item.phone}}
                    </div>
                    <div class="phone" v-else="item.id && item.id.length > 0">
                        {{item.short_id}}</div>
                </div>
            </div>

        </el-option>
    </div>

</template>

<script lang="ts">

    import {Vue, Component, Prop} from 'vue-property-decorator'
    import {Api} from '@/api/meta'

    @Component({
        name:"AdminSearchOption"
    })
    export default class AdminSearchOption extends Vue {

        @Prop({
            required:true
        })
        item: Api.Meta.SearchResponse_Item
    }
</script>

<style lang="scss" scoped>
    .admin-search-option {
        padding: 0px ;
        height: 40px;

        .panel {
            display: flex;
            flex-direction: row;
            .avatar {

                padding-top: 2px;
                padding-bottom: 2px;
                padding-right: 4px;
                img {
                    position: relative;
                    display: inline-block;
                    width:36px;
                    height:36px;
                    /*圆形显示*/
                    border-radius: 50%;
                    /*圆形显示*/
                    background: rgba(255,255,255,0.1);
                    vertical-align: center;
                }
            }
        }

        .info {

            display: flex;
            flex-direction: column;
            height: 40px;

            .name {
                padding-top: 6px;
                height: 20px;
                line-height: 14px;
                font-size: 14px;
            }

            .phone {
                line-height: 20px;
                font-family: "Courier New";
                font-size: 12px;
                color: #909399;
            }


        }

    }
</style>